<template>
  <div>
    <el-form :model="SocketClientDeviceInfo" class="device-socket" size="mini">
      <el-form-item label="名称">
        <el-input v-model="SocketClientDeviceInfo.DeviceName" maxlength="35" placeholder="请输入设备名称"></el-input>
      </el-form-item>
      <el-form-item label="IP">
        <el-input v-model="SocketClientDeviceInfo.Ip" maxlength="20" placeholder="请输入设备IP"></el-input>
      </el-form-item>
      <el-form-item label="端口">
        <el-input v-model="SocketClientDeviceInfo.Port" type="Number" placeholder="请输入设备端口"></el-input>
      </el-form-item>
      <el-form-item label="接收超时/ms">
        <el-input
            v-model="SocketClientDeviceInfo.ReceiveTimeout"
            type="Number"
            placeholder="请输入接收超时时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="发送超时/ms">
        <el-input
            v-model="SocketClientDeviceInfo.SendTimeout"
            type="Number"
            placeholder="请输入发送超时时间"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="AddSocketClientBtn">保存
        </el-button>
        <el-button type="danger" round @click="DeleteSocketClientBtn">删除
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SysDriveApi from '@/api/flow/SysDriveApi'
import { MessageSuccess } from "@/utils";
export default {
  name: 'SocketClient',
  data () {
    return {
      SocketClientDeviceInfo: {
        DeviceName: null,
        Ip: null,
        Port: null,
        ReceiveTimeout: null,
        SendTimeout: null
      }
    }
  },
  methods: {
    _Show (Device) {
      this.SocketClientDeviceInfo = Device
    },
    AddSocketClientBtn () {
      const scdi = this.SocketClientDeviceInfo
      scdi.DeviceType = 'SOCKET_CLIENT'
      new SysDriveApi().AddDrive(scdi, (res) => {
        MessageSuccess('保存成功')
        this.$emit('close')
      })
    },
    DeleteSocketClientBtn () {
      this.$confirm(`是否删除设备${this.SocketClientDeviceInfo.DeviceName}？`, `确认删除设备`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'el-button--warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        new SysDriveApi().DeleteDevice(this.SocketClientDeviceInfo.Id, (de) => {
          if (de) {
            this.$emit('close')
            MessageSuccess('删除成功')
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.device-socket {
}
</style>
